<template>
  <a-modal v-model:visible="visible" :title="title" :width="width" unmount-on-close hide-cancel @close="onClose">
    <div class="flex justify-center">
      <template v-if="type === 'pc'">
        <img src="../../../../../assets/pc-message.png" alt="" />
      </template>
      <template v-if="type === 'app'">
        <img src="../../../../../assets/app-message.png" alt="" />
      </template>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { computed } from 'vue'

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '查看样式',
    },
    width: {
      type: String,
      default: '45vw',
    },
  })
  const emits = defineEmits(['update:modelValue'])

  const visible = computed({
    get: () => props.modelValue,
    set: (val) => emits('update:modelValue', val),
  })

  const onClose = () => {
    emits('update:modelValue', false)
  }
</script>

<style lang="less" scoped></style>
